iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

React Native & Redux 初步探討系列 第 27

Day 27 Redux 接入 component

  • 分享至 

  • xImage
  •  

第 27 天 !

昨天我們把 redux 給接入到我們的專案上,

那今天試著把 store 的 state 給導入到我們的 component 裡,

那我們要如何取得 store 的資訊呢?

redux 裡, 我們是不能直接的去存取 store 的資料,

所以我們必須去用間接的方式去取得我們想要的資訊,

首先,我們先使用 redux 提供的 connect

connect

connect 會幫我們去連接 store ,並且讓我們設定要提取哪些資料跟 action

connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

  • mapStateToProps?: Function
  • mapDispatchToProps?: Function | Object
  • mergeProps?: Function
  • options?: Object

用法:

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component);

mapStateToProps

當我們希望從 store 上獲取 state 時,就需要去設定 mapStateToProps , 格式是 function

它會導入 storestatereturn 的值,會被當成 props , 傳給指定的 component

只要 store 發生變化,就會觸發這個 function

like:

const mapStateToProps = (state, ownProps) => {
  return {
    ...state,
  };
};

返回值發生變化的話, 就會觸發 re-render

如果,mapStateToProps 沒有設定, 那 store變化,將不會影響到這個 component

mapDispatchToProps

reduxdispatch 是無法隨意引入的,要引入必須從 mapDispatchToProps

它會提供 dispatch 來讓我們導入 action

格式是 function

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    action: (payload) => {
      dispatch(actionCreator(payload));
    },
  };
};

格式是 object:

const mapDispatchToProps = {
  actionCreator: (payload) => ({
    type: '',
    payload,
  }),
};

有兩種綁定方式, 一種是 function ,一種是 object

function 比較屬於客製化, 就是說假如還想在裡面加上額外邏輯,那就選用 function

最後都會把我們設定的當做 props 傳入 component

export default function Home({ action }) {
  return <div className={cls.root}></div>;
}

假如沒有,其實可以考慮傳入 actionCreatorconnect 會幫你自動綁定 dispatch

最後假如不設定,最後會把 dispatch functionprops 傳入,

export default function Home({ dispatch }) {
  return <div className={cls.root}></div>;
}

mergeProps

redux 相關的參數都會是 props 傳遞, 那如何跟 componentprops 做合併,那就必須要去考慮順序,

原本的順序是:

  • stateProps
  • dispatchProps
  • ownProps

那我們可以根據我們的需求,去調整這部份,

格式是:

function mergeProps(stateProps, dispatchProps, ownProps) {
  return {
    ...stateProps,
    ...dispatchProps,
    ...ownProps
  }
}

上一篇
Day 26 設定 Redux 環境
下一篇
Day 28 加入 Action
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言